

<!--不使用脚手架生成 浏览器引入一个 使用Vue3 、ElementPlus 、axios、antd 的 单页面项目-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue Project</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入 Element Plus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入 antd 样式 -->
    <!-- 引入antd的CSS文件 -->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.css">-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.0/antd.min.css">-->
</head>

<body>
<div id="app">
    <h1>欢迎来到我的单页面应用</h1>
    <button @click="initForm">获取数据</button>
    <p v-if="data">{{ data }}</p>
    <el-button>Element Plus 按钮</el-button>
    <antd-button>Antd 按钮</antd-button>


        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>



        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="Date" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon><timer /></el-icon>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="Name" width="180">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>name: {{ scope.row.name }}</div>
                            <div>address: {{ scope.row.address }}</div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index)">
                        Edit
                    </el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index)"
                    >
                        Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

</div>

<!-- 引入ElementPlus的JavaScript文件 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入axios的JavaScript文件 -->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!-- 引入antd的JavaScript文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/antd@next"></script>-->
<script src="https://docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/axios.min.js"></script>
<script src="https://docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/qs.js"></script>
<script>
    // 引入 axios
    // const axios = require('axios');
    const { createApp } = Vue;
    // const { Timer } = '@element-plus/icons-vue'


    // interface User {
    //     date: string
    //     name: string
    //     address: string
    // }

    const App = {
        data() {
            return {
                data: null,
                tableData : [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ]
            };
        },
        methods: {
             // handleEdit  (index: number, row: User) {
             handleEdit  (index) {
                console.log(index, row)
            },
             handleDelete (index) {
                console.log(index, row)
            },
            async fetchData() {
                try {
                    const response = await axios.get('http://127.0.0.1:8000/api/contracts');
                    this.data = response.data;
                } catch (error) {
                    console.error(error);
                }
            },
            initForm() {
                axios({
                    method: 'post',
                    // url: 'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app',
                    url: 'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app',
                    data: Qs.stringify({
                        type: this.type,
                        user_id: this.user_id
                    })
                })
                    .then(function (response) {
                        console.log(response);
                        let data = response.data
                        if (data.rc === 0) {
                            // alert(data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    };
    const app = createApp(App);
    app.use(ElementPlus);
    // app.use(antd);
    app.mount('#app');
</script>
</body>

</html>